<template>
  <div>
    <el-table
        :data="reqData"
        :stripe="true"
        style="width: 100%">
      <el-table-column
          prop="applicantName"
          label="申请人姓名"
          width="220"
      >
      </el-table-column>
      <el-table-column
          prop="itemName"
          label="报修物品名"
          width="260">
      </el-table-column>
      <el-table-column
          prop="damagedLevel"
          label="损坏程度"
          width="260">
      </el-table-column>
      <el-table-column >
        <template slot-scope="scope">
          <el-button
              v-if="'已申请报修'===(scope.$index, scope.row).progress"
              size="mini"
              >已申请报修
          </el-button>
          <el-button
              v-if="'已维修完毕'===(scope.$index, scope.row).progress"
              size="mini"
              type="success"
              >已维修完毕
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <!--分页-->
    <pagination
        v-show="inPage.total > 0"
        :total="inPage.total"
        :page.sync="inPage.current"
        :limit.sync="inPage.size"
        @pagination="init"
    />
  </div>
</template>

<script>
import {getReqList} from "@/api/repair";
import Pagination from "@/components/Pagination";
import {mapGetters} from "vuex";


export default {
  name: 'reqHistoryComp',
  components: {Pagination},
  computed: {
    ...mapGetters(["token", "user"]),
  },
  data() {

    return {
      inPage: {
        current: 1,
        size: 10,
        total: 0
      },
      reqData: [],
    }
  },

  mounted() {
    this.init();
  },

  methods: {

    init() {
      getReqList(this.inPage.current, this.inPage.size).then((response) => {

        const {data} = response;
        this.inPage.current = data.current;
        this.inPage.total = data.total;
        this.inPage.size = data.size;

        this.reqData = data.records;
      });
    },
  },
}
</script>
